<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>China Map</title>
    <script type="text/javascript" src="../lib/d3.js"></script>
    <script type="text/javascript" src="../lib/topojson.js"></script>
</head>
<body>
<script type="text/javascript">
    var width = 1000, height = 1000;

    var svg= d3.select("body").append("svg")
        .attr("width",width)
        .attr("height",height)
        .append("g")
        .attr("transform","translate(0,0)");

    //投影
    var projection = d3.geo.mercator()
        .center([107,31])  //这里没有双引号
        .scale(850)
        .translate([width/2,height/2]);
    //路径生成器
    var path = d3.geo.path()
        .projection(projection);

    var colorScale = d3.scale.category20();


    d3.json("../geojson/china.topojson",function(error,toporoot){
       if(error)
           return console.error(error);

       //输出china.topojson的对象
        console.log(toporoot);

        //将topoJSON对象转换为GeoJSON，保存在georoot中
        //然而需要注意的是，实际上在绘制地图时，还是使用了GeoJSON对象。

        var georoot = topojson.feature(toporoot,toporoot.objects.china);

        console.log(georoot);

        svg.selectAll("path")
            .data(georoot.features)
            .enter()
            .append("path")
            .attr("class","province")
            .attr("fill", function(d,i){    //每一块的颜色填充
                return colorScale(i);
            })
            .attr("d", path )

    });


</script>
</body>
</html>